<template>
	<div class="secNavWarp" v-bind:class="{scr_act:act}">
		<div class="secNav">
			<router-link :to="{name:'channel',params:{tid:curTid}}">推荐</router-link>
			<router-link v-for="(item,index) in secondNavList" :key="index" :to="{name:'channel',params:{tid:item.tid}}">
				{{item.typename}}
			</router-link>
		</div>
	</div>
</template>

<script>
	let partitionList=window.__INITIAL_STATE__.reduxAsyncConnect.partitionList
	export default{
		props:{
			tid:{
				type:[String,Number],
				default:'1'
			}
		},
		watch:{
			$route(newValue){
//				console.log("test")
//				this.$emit("changeTid",newValue.params.tid)//旧方法
//				this.$store.commit("setCurTid",{
//	  				curTid:this.$route.params.tid
//	  			})
//				this.secondNavList=partitionList[this.$store.getters.getCurTid]
//				this.curTid=this.$store.getters.getCurTid
			},
			//上下两种都可以实现切换二级，侦听tid需要由父组件(channel.vue)获取tid的变化(该页面本身没tid)，侦听$route则不需要
			tid(newValue){
				console.log(newValue)
////				实时更新secondNavList的内容,来自父组件传值
				this.secondNavList=partitionList[this.$store.getters.getCurTid]
				this.curTid=this.$store.getters.getCurTid
			},
		},
		data(){
			return {
				curTid:"1",
				act:false,
				secondNavList:[]
			}
		},
		created(){
			this.$store.commit("setCurTid",{
	  				curTid:this.$route.params.tid
	  			})
			this.secondNavList=partitionList[this.$store.getters.getCurTid]
			this.curTid=this.$store.getters.getCurTid//初始化赋值
			
		},
		computed:{
//			secondNavList:{
//				get:function(){
//					this.curTid=this.$store.getters.getCurTid
//					this.NavList=partitionList[this.curTid]
//					return this.NavList
//				},
//				set:function(newValue){
////					console.log("newValue",newValue)
////					console.log(this.curTid)
////					if(newValue){
////						this.curTid=this.$store.getters.getCurTid
////					}
////					this.NavList=partitionList[this.curTid]
//				}
//			}
		},
		mounted(){
			window.addEventListener('scroll',()=>{
				this.$store.commit("scrollEvent")//激活
				this.act=this.$store.getters.getScrAct//更新
			})
		},
		methods:{
			
//			_SetSecondNavList(tid){
//				const hasCon=partitionList[tid]
//				console.log("hasCon",hasCon);
//				if(!hasCon){
//					let handleNav=function(){
//						遍历大对象的属性名(键名)
//						const keyArr=Object.keys(partitionList)//存入键名
////						console.log("keyArr",keyArr)
//						for(let i=0,len=keyArr.length;i<len;i++){
//							const tmpArr=partitionList[keyArr[i]]
//							for(let j=0;j<tmpArr.length;j++){
//								console.log(tmpArr[j])
//								if(tmpArr[j].tid==tid){
//									return keyArr[i]
//								}
//							}
//						}
//					}
//					this.curTid=handleNav()
//				}else{
//					this.curTid=tid
//				}
////				this.$store.commit("setCurTid",this.curTid)
//				this.NavList=partitionList[this.curTid]
//			}
		}
	}
</script>

<style lang="scss" type="text/css">
.scr_act{
	transform: translateY(-45px);
}
.secNavWarp{
	transition: all .5s;
	width: 100%;
	position: fixed;
	top: 76px;
	z-index: 77;
	.secNav{
		background-color: #f9f9f9;
		height: 45px;
		line-height: 45px;
		/*text-wrap: nowrap;*/
		display: flex;
		flex-wrap: nowrap;
		overflow-x: scroll;
		&::-webkit-scrollbar {
				display: none;
			}
		padding-left:10px;
		a{
		    
		    color: #757575;
			padding: 0 10px;
			flex-shrink: 0;
		}
	}
}
</style>